<template>
  <section>
    <el-form ref="editPlantForm" :model="editPlantForm" label-width="80px" @submit.prevent="onSubmit"
             style="margin:20px;min-width:600px;">

      <el-form-item label="蔬菜名">
        <template>
          <div style="width: 300px;display: inline-block;">
            <el-input v-model="editPlantForm.name" auto-complete="on"></el-input>
          </div>
          <span style="margin-left: 10px;color: #48576A;">例如：黄瓜</span>
        </template>
      </el-form-item>

      <el-form-item label="成熟期">
        <template slot-scope="scope">
          <div style="width: 300px;display: inline-block;">
            <el-input v-model="editPlantForm.maturity" auto-complete="on"></el-input>
          </div>
          <span style="margin-left: 10px;color: #48576A;">例如：25(天)-输入数字</span>
        </template>
      </el-form-item>

      <el-form-item label="预估产量">
        <template slot-scope="scope">
          <div style="width: 300px;display: inline-block;">
            <el-input v-model="editPlantForm.production" auto-complete="on"></el-input>
          </div>
          <span style="margin-left: 10px;color: #48576A;">例如：300斤-输入数字</span>
        </template>
      </el-form-item>

      <el-form-item label="库存">
        <template slot-scope="scope">
          <div style="width: 300px;display: inline-block;">
            <el-input v-model="editPlantForm.inventory" auto-complete="on"></el-input>
          </div>
          <span style="margin-left: 10px;color: #48576A;">例如：30(份)-输入数字</span>
        </template>
      </el-form-item>

      <el-form-item label="售价">
        <template slot-scope="scope">
          <div style="width: 300px;display: inline-block;">
            <el-input v-model="editPlantForm.price" auto-complete="on"></el-input>
          </div>
          <span style="margin-left: 10px;color: #48576A;">例如：59(元)-输入数字</span>
        </template>
      </el-form-item>

			<el-form-item label="标价">
        <template slot-scope="scope">
          <div style="width: 300px;display: inline-block;">
            <el-input v-model="editPlantForm.orgin_price" auto-complete="on"></el-input>
          </div>
          <span style="margin-left: 10px;color: #48576A;">例如：59(元)-输入数字</span>
        </template>
      </el-form-item>

      <el-form-item label="浇水间隔">
        <template slot-scope="scope">
          <div style="width: 300px;display: inline-block;">
            <el-input v-model="editPlantForm.plant_water_interval" auto-complete="on"></el-input>
          </div>
          <span style="margin-left: 10px;color: #48576A;">例如：3(时)-输入数字</span>
        </template>
      </el-form-item>

      <el-form-item label="施肥间隔">
        <template slot-scope="scope">
          <div style="width: 300px;display: inline-block;">
            <el-input v-model="editPlantForm.plant_fert_interval" auto-complete="on"></el-input>
          </div>
          <span style="margin-left: 10px;color: #48576A;">例如：3(时)-输入数字</span>
        </template>
      </el-form-item>

      <el-form-item label="锄草间隔">
        <template slot-scope="scope">
          <div style="width: 300px;display: inline-block;">
            <el-input v-model="editPlantForm.plant_weed_interval" auto-complete="on"></el-input>
          </div>
          <span style="margin-left: 10px;color: #48576A;">例如：3(时)-输入数字</span>
        </template>
      </el-form-item>

      <el-form-item label="除虫间隔">
        <template slot-scope="scope">
          <div style="width: 300px;display: inline-block;">
            <el-input v-model="editPlantForm.plant_bug_interval" auto-complete="on"></el-input>
          </div>
          <span style="margin-left: 10px;color: #48576A;">例如：3(时)-输入数字</span>
        </template>
      </el-form-item>
	    <el-form-item label="列表图片">
        <template>
          <div class="p-listPic-upload">
            <el-button type="success">上传<i class="el-icon-upload el-icon--right"></i></el-button>
            <span class="upload_plant_pic"><input type="file" name="file" class="cfg_upload_pic" @change="upInputOnchange($event, 1, -1)"></span>
          </div>
          <div style="width: 120px;height: 80px; background: #ffffff;overflow: hidden;margin-top: 20px" v-if="editPlantForm.list_pic">
            <img :src="editPlantForm.list_pic" />
          </div>
        </template>
      </el-form-item>
      <el-form-item label="详情图片">
        <template v-if="editPlantForm.detail_pic">
          <div class="p-listPic-upload">
            <el-button type="success">上传<i class="el-icon-upload el-icon--right"></i></el-button>
            <span class="upload_plant_pic"><input type="file" name="file" class="cfg_upload_pic" @change="upInputOnchange($event, 2, -1)"></span>
          </div>
          <div v-for="(item, index) in editPlantForm.detail_pic" style="position: relative;">
            <div style="width: 400px;display: inline-block;">
              <el-input :value="item" :key="index" auto-complete="on" style="margin-top: 5px;" readonly></el-input>
            </div>
            <div class="p-pic-upload">
              <el-button type="success">修改<i class="el-icon-upload el-icon--right"></i></el-button>
              <span class="upload_plant_pic_edit"><input type="file" name="file" class="cfg_upload_pic" @change="upInputOnchange($event, 2, index)"></span>
            </div>
          </div>
          <div style="margin-top: 5px;overflow: hidden">
            <img @click="deleteDetailPic(index)" :src="item" alt="" v-for="(item, index) in editPlantForm.detail_pic" :key="index" style="width: 140px;height: 80px;margin-right: 5px;cursor: pointer;">
          </div>
        </template>
      </el-form-item>

      <el-form-item label="描述">
        <template>
          <div style="width: 600px;">
            <el-input type="textarea" v-model="editPlantForm.desc"></el-input>
          </div>
        </template>
      </el-form-item>
      <el-form-item label="种子详情">
        <editer ref="editer" :content="content"></editer>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click.native="editSubmit">提交</el-button>
        <el-button @click.native.prevent>取消</el-button>
        <el-button type="primary" @click.native="_writed">写入信息</el-button>
      </el-form-item>

    </el-form>
  </section>
</template>

<script type="text/ecmascript-6">
  import { apiTree } from '../../apiTree'
  import NProgress from 'nprogress'
  import util from '../../util'
  import editer from '../common/ueditor'
  import { returnEditerHtml } from '../../vuex/getters'

  export default {
    components: {
      editer
    },
    data() {
      return {
        editPlantForm: {
          type: 1,
          name: '',
          desc: '',
          list_pic: '',
          detail_pic: [],
          production: 0, // 产量
          maturity: 0, // 成熟期
          price: 0, // 单价
          orgin_price: 0, // 原价
          inventory: 0, // 库存
          content: '',
          plant_water_interval: 0, // 浇水间隔
          plant_fert_interval: 0, // 施肥间隔
          plant_weed_interval: 0, // 锄草间隔
          plant_bug_interval: 0 // 除虫间隔
        },
        content: '',
        fileList: []
      }
    },
    methods: {
      // 上传种子照片
      upInputOnchange(e, _type, index) {
        var _that = this
        let file = e.target.files[0]
        let _reader = new FileReader()
        _reader.readAsDataURL(file)
        _reader.onload = function() {
          let _file = this.result
          let param = {'file': _file, 'type': 3}
          apiTree('upload/index', 'plant/upload', param, 'POST').then((res) => {
            if (res.s === 1) {
              // 列表图片
              if (_type === 1) {
                _that.editPlantForm.list_pic = res.d.url
              }
              // 详情图片
              if (_type === 2) {
                _that.$nextTick(() => {
                  if (index < 0) {
                    _that.editPlantForm.detail_pic.push(res.d.url);
                  } else {
                    _that.editPlantForm.detail_pic[index] = res.d.url;
                  }
                  _that.$set(_that.editPlantForm.detail_pic, _that.editPlantForm.detail_pic);
                })
              }
            }
          })
        }
      },
      // deleteDetailPic 删除详情图片
      deleteDetailPic(_index) {
        this.editPlantForm.detail_pic.splice(_index, 1);
      },
      uploadSuccess(res, _file) {
        if (res.s === 1) {
          let _name = _file.name
          this.editPlantForm.detail_pic.push({name: _name, url: res.d.url})
        }
      },
      removePic(_file) {
        this.editPlantForm.detail_pic.forEach((item, key) => {
          if (_file.name === item.name) {
            this.editPlantForm.detail_pic.splice(key, 1)
          }
        })
      },
      editSubmit: function () {
        this.$refs.editPlantForm.validate(() => {
          this.$refs.editer.$emit('getUeditorContent')
          this.editPlantForm.content = returnEditerHtml(this.$store.state)
          if (util.isEmpty(this.editPlantForm.content)) {
            this.$message.error('内容为空')
            return
          }
          if (util.isEmpty(this.editPlantForm.name)) {
            this.$message.error('植物名为空')
            return
          }
          if (util.isEmpty(this.editPlantForm.list_pic)) {
            this.$message.error('列表图片为空！')
            return
          }
          if (util.isEmpty(this.editPlantForm.plant_water_interval)) {
            this.$message.error('浇水间隔为空!');
            return
          }
          if (util.isEmpty(this.editPlantForm.plant_fert_interval)) {
            this.$message.error('施肥间隔为空!');
            return
          }
          if (util.isEmpty(this.editPlantForm.plant_weed_interval)) {
            this.$message.error('除草间隔为空!');
            return
          }
          if (util.isEmpty(this.editPlantForm.plant_bug_interval)) {
            this.$message.error('除虫间隔为空!');
            return
          }
          if (!this.editPlantForm.maturity || !util.isInt(this.editPlantForm.maturity)) {
            this.$message.error('输入正确的成熟期！')
            return
          }
          if (!this.editPlantForm.production || !util.isInt(this.editPlantForm.production)) {
            this.$message.error('输入正确的产量！')
            return
          }
          if (!this.editPlantForm.inventory || !util.isInt(this.editPlantForm.inventory)) {
            this.$message.error('输入正确的库存！')
            return
          }
          if (!this.editPlantForm.price) {
            this.$message.error('输入正确的单价！')
            return
          }
          if (!this.editPlantForm.orgin_price) {
            this.$message.error('输入正确的原价！')
            return
          }
          if (!this.editPlantForm.desc) {
            this.$message.error('植物描述为空')
            return
          }
          if (!this.editPlantForm.detail_pic) {
            this.$message.error('详情图片为空!')
            return
          }
          this.editLoading = true;
          apiTree('plant/index', 'plant/setPlant', this.editPlantForm, 'POST').then((res) => {
            if (res.s === 1) {
              NProgress.done();
              this.$message({
                message: '提交成功',
                type: 'success'
              });
              this.editLoading = false;
              this.editFormVisible = false
              this.$router.push('/plant/index');
            } else {
              this.editLoading = false;
              this.$message.error(res.err_str)
            }
          })
        })
      },
      editList: function () {
        let param = {'name': this.$route.params.name}
        apiTree('plant/index', 'plant/editPlantList', param).then((res) => {
          let row = res.d.data
          this.editPlantForm = {
            type: 2,
            name: row.name,
            desc: row.detail_desc,
            list_pic: row.list_pic,
            detail_pic: row.detail_pic,
            production: parseInt(row.production) / 500, // 产量
            maturity: row.maturity, // 成熟期
            price: parseInt(row.price) / 100, // 单价
            orgin_price: parseInt(row.orgin_price) / 100, // 原价
            inventory: row.inventory, // 库存
            plant_water_interval: parseInt(row.plant_water_interval) / 3600, // 浇水间隔
            plant_fert_interval: parseInt(row.plant_fert_interval) / 3600, // 施肥间隔
            plant_weed_interval: parseInt(row.plant_weed_interval) / 3600, // 锄草间隔
            plant_bug_interval: parseInt(row.plant_bug_interval) / 3600 // 除虫间隔
          }
          this.content = res.d.data.content
        })
      },
      _writed() {
        this.$refs.editer.$emit('setUeditorContent')
      }
    },
    created() {
      this.editList()
    },
    mounted() {
      let that = this
      setTimeout(function(){
        that.$refs.editer.$emit('setUeditorContent')
      }, 400)
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    .p-listPic-upload
      display inline-block
      margin-left 10px
      position relative
      cursor pointer
      .upload_plant_pic
        display block
        width 80px
        height 35px
        cursor pointer
        position absolute
        top 0px
        left 0px
        opacity 0
        & input[type=file]
          display block
          cursor pointer
          width 80px
          height 35px
    .p-pic-upload
      position absolute
      top 5px
      left 410px
      .upload_plant_pic_edit
        display block
        width 80px
        height 35px
        cursor pointer
        position absolute
        top 0px
        left 0px
        opacity 0
        & input[type=file]
          display block
          cursor pointer
          width 80px
          height 35px
    .p-pic-old-input
      display inline-block
      width 500px
</style>
